  <template>
  <div>
    <el-table
      ref="multipleTable"
      :data="list.currentPageRecords"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column label="序号" type="index" width="80"> </el-table-column>
      <el-table-column prop="innerCode" label="设备编号"> </el-table-column>
      <el-table-column label="详细地址" show-overflow-tooltip>
        <template v-slot="{ row }">
          {{ row.node.addr.split("-")[3] }}
        </template>
      </el-table-column>
      <el-table-column prop="ownerName" label="合作商" show-overflow-tooltip>
      </el-table-column>
      <el-table-column label="设备状态" show-overflow-tooltip>
        <template v-slot="{ row }">
          {{
            row.vmStatus === 0
              ? "未投放"
              : row.vmStatus === 1
              ? "运营"
              : row.vmStatus === 3
              ? "撤机"
              : "无"
          }}
        </template>
      </el-table-column>
      <el-table-column label="操作" show-overflow-tooltip>
        <template v-slot='{row}'>
          <el-button type="text">货道</el-button>
          <el-button type="text" @click="detailFn(row.innerCode)">策略</el-button>
          <el-button type="text">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-row type="flex" justify="space-between">
        <el-col
          ><div class="leftDec">
            <span>{{
              `共${list.totalCount}条数据 第${list.pageIndex}/${list.totalPage}页`
            }}</span>
          </div></el-col
        >
        <el-col :span="4">
          <div>
            <el-pagination
              background
              layout="prev, next"
              prev-text="上一页"
              next-text="下一页"
              :current-page.sync="queryPage.pageIndex"
              @current-change="currentChangeFn"
            >
            </el-pagination>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 查看详情 -->
    <!-- <DetailDialog
      :dialogVisible.sync="detailDialogVisible"
      :DetailList="DetailList"
      :DetailObj="DetailObj"
    /> -->
    <!-- 修改 -->
    <!-- 修改 -->
    <add
      v-if="editShow"
      :areaCode="areaCode"
      :rows="rows"
      :visible.sync="editShow"
      :or="or"
      :businessList="businessList"
      :areaList="areaList"
      :hzsList="hzsList"
    />
    <!-- 查看详情 -->
    <detail
      :obj='obj'
      :dialogTableVisible.sync="dialogTableVisible"
      :id='id'
    />
  </div>
</template>

<script>
// import { detail } from '@/api/workorder'
// import DetailDialog from '@/views/Point/ Components/Distric/AreaDialog.vue'
import add from '@/views/Point/ Components/Distric/AddDialog.vue'
import detail from '@/views/equipment/ Components/ManageDetail.vue'

const dayjs = require('dayjs')
export default {
  props: {
    list: {
      type: [Array, Object],
      required: true
    },
    searchStaus: Boolean
  },
  created () {
    // this.handleSelectionChange()
  },
  data () {
    return {
      // 查看详情
      dialogTableVisible: false,
      addDialogShow: false,
      editShow: false,
      disabled: false,
      detailDialogVisible: false,
      DetailList: [],
      rows: {},
      queryPage: {
        pageIndex: 1,
        pageSize: 10
      },
      disable: false,
      or: null,
      row: {},
      selectionLength: [],
      obj: {},
      id: null
    }
  },
  methods: {
    currentChangeFn (val) {
      console.log(val)
      this.$emit('changePage', val)
    },
    async detailFn (innerCode) {
      // console.log('查看详情')
      this.dialogTableVisible = true
      this.id = innerCode
      console.log(this.id)
    },
    editFn (row) {
      this.or = 2
      this.editShow = true
      this.rows = row
    },
    async delFn (row) {
      try {
        // const res = await delPoint(row.id)
        // console.log(res)
        this.$message.success('删除点位成功')
        this.getPointListFn()
      } catch (error) {
        this.$message.error(error.response.data)
        // console.log(error.)
      }
    },
    handleSelectionChange (val) {
      // console.log(Object.prototype.toString.call(val))
      this.$emit('selection', val)
    }
  },
  components: { add, detail },
  filters: {
    getNowTime (val) {
      return dayjs(val).format('YYYY-MM-DD HH:mm:ss')
    },
    getAddr (val) {
      const str = val.split('-').pop()
      return str
    }
  },
  inject: ['getPointListFn']
}
</script>

<style lang="less" scoped>
/deep/.el-button {
  color: #5f84ff;
  // color: red;
  cursor: pointer;
}
/deep/.el-button:hover {
  color: #4b67d9;
}
// /deep/.el-table .el-table__cell {
//     box-sizing: border-box;
//     height: 44px !important;
// padding: 0 !important;
// }
/deep/ .el-table__cell {
  /* padding: 12px 0; */
  padding: 0 !important;
  height: 44px;
  min-width: 0;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
  text-align: left;
  border-bottom: none !important;
}
/deep/ .el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  // /* border-bottom: 1px solid #EBEEF5; */
  border: none;
}
.page {
  box-sizing: border-box;
  width: 100%;
  height: 96px;
  background-color: #fff;
  padding: 32px 16px;
  .leftDec {
    text-align: left;
    span {
      color: #dcdfe4;
    }
  }
}
/deep/ .el-pagination span:not([class*="suffix"]) {
  display: inline-block;
  font-size: 13px;
  min-width: 70px;
  height: 32px;
  line-height: 32px;
  vertical-align: top;
  box-sizing: border-box;
  background-color: #d5ddf8;
  color: #606266;
  margin-right: 30px;
}
/deep/.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background {
  background-color: transparent !important;
}
/deep/ .el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
  background-color: transparent !important;
}
/deep/.el-table .cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
